<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>

<body>
  <div id="box" style="width: 600px;height:400px;"></div>
</body>
<script>
  let box = document.getElementById('box');
  let charts = echarts.init(box);
  var data = {
    name: "flare",
    children: [{
        name: "animate",
        symbolSize: 16,
        label: {
          fontSize: 16,
          color: "#000" //字体颜色
        },
        itemStyle: {
          color: "#000", //这是节点折叠时候的颜色
          borderColor: 'yellow',
          borderWidth: 3,
          normal: {
            color: "#00ff00"
          },

        },
        lineStyle: {
          color: "#888",
          width: 4,
          type: 'dotted' //'dotted'虚线 'solid'实线
        },
        children: [{
            name: "Easing",
            value: 17010
          },
          {
            name: "FunctionSequence",
            value: 5842
          },
          {
            name: "interpolate",
            children: [{
                name: "ArrayInterpolator",
                value: 1983
              },
              {
                name: "ColorInterpolator",
                value: 2047
              },
              {
                name: "DateInterpolator",
                value: 1375
              },
              {
                name: "Interpolator",
                value: 8746
              },
              {
                name: "MatrixInterpolator",
                value: 2202
              }
            ]
          },
          {
            name: "ISchedulable",
            value: 1041
          },
          {
            name: "Parallel",
            value: 5176
          },
          {
            name: "Pause",
            value: 449
          }
        ]
      },
      {
        name: "data",
        category: "tree2",
        label: {
          normal: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            show: false,
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0,
                color: 'green' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'white' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            borderColor: 'blue',
            borderWidth: 2,
            shadowColor: 'rgba(0, 0, 0, 1)',
            shadowBlur: 10
          },
          emphasis: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0,
                color: 'green' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'green' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        },
        children: [{
            name: "converters",
            children: [{
                name: "Converters",
                value: 721
              },
              {
                name: "DelimitedTextConverter",
                value: 4294
              },
              {
                name: "GraphMLConverter",
                value: 9800
              },
              {
                name: "IDataConverter",
                value: 1314
              },
              {
                name: "JSONConverter",
                value: 2220
              }
            ]
          },
          {
            name: "DataField",
            value: 1759
          },
          {
            name: "DataSchema",
            value: 2165
          }
        ]
      }
    ]
  };
  option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [{
      type: 'tree',
      initialTreeDepth: -1,
      data: [data],

      top: '1%',
      left: '7%',
      bottom: '1%',
      right: '20%',

      symbolSize: 10,

      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          color: 'black'
        }
      },

      leaves: {
        label: {
          normal: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left',
          }
        },
        itemStyle: {
          normal: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0,
                color: 'blue' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'blue' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        },
      },


    }]
  }
  charts.setOption(option)
</script>